<template>
  <view>
    <view class="hostipal-bg" style="border-top: 1rpx solid #e6e6e6">
      <view class="bg-white mx-25 rd-2 p-40 box-border flex mt-341">
        <view>
          <u-image
            :src="$sc.loadImg('banner.png')"
            width="110rpx"
            height="110rpx"
            shape="circle"></u-image>
        </view>
        <view class="ml-30">
          <view class="flex items-center">
            <view class="color-#333 text-40 flex-1 mr-20">寿光洛城医院</view>
            <view class="flex">
              <view class="bg-#E0F7F2 rd-5rpx color-#5DBE88 text-18 px-7 mr-14"
                >最受欢迎</view
              >
              <view class="bg-#E0F7F2 rd-5rpx color-#5DBE88 text-18 px-7"
                >一甲</view
              >
            </view>
          </view>
          <view class="color-#999 text-24"
            >山东省潍坊市寿光市圣城街道皮肤病医院</view
          >
          <view class="color-#999 text-24">1.6Km</view>
        </view>
      </view>
    </view>
    <view>
      <view class="mt-100 bg-white mx-25 p-30 box-border">
        <view class="flex items-baseline mb-40">
          <view class="text-34 color-#333">护士上门护理</view>
          <view class="color-#999 text-24 ml-20"
            >专业护士团队，守护您的健康</view
          >
        </view>
        <z-paging :fixed="false" height="calc(100vh - 800rpx)">
          <template #top>
            <view class="flex flex-wrap gap-1 mb-40">
              <view
                :class="['tab-item', activeIndex == index ? 'active-item' : '']"
                v-for="(item, index) in serviceList"
                :key="item"
                @click="activeIndex = index"
                >{{ item }}</view
              >
            </view>
          </template>
          <view class="" v-for="item in 10" :key="item">
            <view class="flex mb-40">
              <u-image
                :src="$sc.loadImg('banner.png')"
                width="180rpx"
                height="180rpx"></u-image>
              <view class="ml-30 flex-1">
                <view class="color-#333 text-30"> 上门打针 </view>
                <view class="color-#666 text-24 my-12">
                  肌肉注射 | 皮下注射
                </view>
                <view class="theme-color text-24 border-green">
                  减脂针 | 升白针 | 肿瘤药
                </view>
                <view class="text-24 mt-16">
                  <view class="color-#FC4931 font-bold"> ￥180 </view>
                </view>
              </view>
            </view>
            <view class="mb-40">
              <up-gap height="1" bgColor="#e6e6e6"></up-gap>
            </view>
          </view>
        </z-paging>
      </view>
    </view>
  </view>
</template>

<script setup>
const serviceList = ref(["推荐", "养生调理", "换药拆线", "打针采血"]);
const activeIndex = ref(0);
</script>

<style lang="scss" scoped>
.hostipal-bg {
  width: 100%;
  height: 460rpx;
  background: url("https://file.sdbly.cn/nurse/static/yybg.png") no-repeat;
  background-size: 100% 460rpx;
  background-position: left top;
}
.tab-item {
  width: 150rpx;
  height: 60rpx;
  background: #f5f5f5;
  border-radius: 30rpx;
  font-weight: 500;
  font-size: 28rpx;
  color: #333333;
  display: flex;
  align-items: center;
  justify-content: center;
}
.active-item {
  background: #5dbe88;
  color: #ffffff;
  font-weight: bold;
}
</style>
